<template>
	<!-- 满减 -->
	<view @touchmove.prevent.stop>
		<u-popup class="manjian-popup" :show="manjianShow" @close="manjianShow = false" zIndex="999999">
			<view class="min-h-[480rpx] popup-common" @touchmove.prevent.stop>
				<view class="title !pb-[30rpx]">满减送</view>
				<scroll-view class="h-[520rpx]" scroll-y="true">
					<view class="px-[var(--popup-sidebar-m)] pt-[30rpx]">
						<view v-for="(item, index) in data.content" :key="index" class="mb-[40rpx]">
							<view class="flex items-center">
								<text class="nc-iconfont nc-icon-qianbaoyueV6xx !text-[28rpx] mr-[10rpx]"></text>
								<text class="text-[26rpx] font-500">{{ item.limit }}</text>
							</view>
							<view class="mt-[20rpx]">
								<view v-if="item.goods && item.goods.length" class="flex mt-[20rpx]">
									<view class="w-[100rpx] flex justify-end">
										<view
											class="bg-[var(--primary-color-light)] text-[var(--primary-color)] rounded-[6rpx] text-[22rpx] flex items-center justify-center px-[12rpx] h-[38rpx] mr-[6rpx]">
											赠品</view>
									</view>
									<view class="flex-1 ml-[8rpx]">
										<view class="flex p-[20rpx] bg-[#f8f8f8] rounded-[var(--goods-rounded-big)] overflow-hidden"
											:class="{ 'mb-[20rpx]': goodsIndex != (item.goods.length - 1) }"
											v-for="(goodsItem, goodsIndex) in item.goods" :key="goodsIndex"
											@click="goodsEvent(goodsItem.goods_id)">
											<u--image radius="var(--goods-rounded-mid)" width="120rpx" height="120rpx"
												:src="img(goodsItem.sku_image)" model="aspectFill">
												<template #error>
													<image class="w-[120rpx] h-[120rpx] rounded-[var(--goods-rounded-big)] overflow-hidden"
														:src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
												</template>
											</u--image>
											<view class="flex flex-1 w-0 flex-col justify-between ml-[20rpx] pt-[6rpx] pb-[10rpx]">
												<view class="truncate text-[#303133] text-[24rpx] leading-[32rpx]">
													{{ goodsItem.goods_name }}
												</view>
												<view class="flex items-baseline">
													<view v-if="goodsItem.sku_name" class="truncate text-[22rpx] mt-[4rpx] text-[#999]">
														{{ goodsItem.sku_name }}
													</view>
													<view class="font-400 ml-[auto] text-[24rpx] text-[#303133]">
														<text>x</text>
														<text>{{ goodsItem.num }}</text>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
								<block v-if="item.give && item.give.length">
									<view class="flex items-center mt-[24rpx]" v-for="(giveItem, giveIndex) in item.give" :key="giveIndex">
										<view class="w-[100rpx] flex justify-end">
											<view
												class="bg-[var(--primary-color-light)] text-[var(--primary-color)] rounded-[6rpx] text-[22rpx] flex items-center justify-center px-[12rpx] h-[38rpx] mr-[6rpx]">
												{{ giveItem.label }}</view>
										</view>
										<text class="text-[24rpx]">{{ giveItem.content }}</text>
									</view>
								</block>
								<view class="flex items-baseline mt-[24rpx]" v-if="item.coupon && item.coupon.length">
									<view class="w-[100rpx] flex justify-end">
										<view
											class="bg-[var(--primary-color-light)] text-[var(--primary-color)] rounded-[6rpx] text-[22rpx] flex items-center justify-center px-[12rpx] h-[38rpx] mr-[6rpx]">
											优惠券</view>
									</view>
									<view class="flex flex-wrap flex-1">
										<text class="flex items-center text-[24rpx] leading-[1.3]"
											:class="{ 'mb-[16rpx]': couponIndex != (item.coupon.length - 1) }"
											v-for="(couponItem, couponIndex) in item.coupon" :key="couponIndex">
											{{ couponItem.num }}张{{ couponItem.coupon_name }}优惠券
										</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="btn-wrap">
					<button class="primary-btn-bg btn" @click="manjianShow = false">确定</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { img, deepClone, getToken, redirect } from '@/utils/common'
import { cloneDeep } from 'lodash-es'
import { t } from '@/locale'

const manjianShow = ref(false);
const data = ref({});
const open = (parameter: any = {}) => {
	data.value = cloneDeep(parameter);
	data.value.content = [];
	data.value.rule_json.forEach((item, index) => {
		if (item.is_show || item.is_show == undefined) {
			let obj = {};
			obj.limit = `门槛满${data.value.condition_type == 'over_n_yuan' ? parseFloat(item.limit).toFixed(2) : item.limit}${data.value.condition_type == 'over_n_yuan' ? '元' : '件'}`;
			if (item.is_give_goods) {
				obj.goods = deepClone(item.goods);
			}
			obj.give = [];
			if (item.is_discount && item.discount_money) {
				obj.give.push({
					label: '满减',
					content: `订单金额${item.discount_type == 1 ? '减' : '打'}${item.discount_type == 1 ? parseFloat(item.discount_money).toFixed(2) : item.discount_money}${item.discount_type == 1 ? '元' : '折'}`
				})
			}
			if (item.is_free_shipping) {
				obj.give.push({
					label: '包邮',
					content: '商品包邮'
				});
			}
			if (item.is_give_point && item.point) {
				obj.give.push({
					label: '积分',
					content: `送${item.point}积分`
				});
			}
			if (item.is_give_balance && item.balance) {
				obj.give.push({
					label: '余额',
					content: `送${parseFloat(item.balance).toFixed(2)}余额`
				});
			}
			if (item.is_give_coupon) { obj.coupon = item.coupon; }
			data.value.content.push(obj);
		}
	});
	manjianShow.value = true;
}

const goodsEvent = (id: number) => {
	// redirect({
	// 	url: '/addon/shop/pages/goods/detail',
	// 	param: {
	// 		goods_id: id
	// 	}
	// })
}

defineExpose({
	open
})
</script>

<style lang="scss" scoped>
::v-deep .manjian-popup .u-slide-up-enter-to {
	z-index: 999999 !important;
}
</style>